<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件</title>
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 标题组件 -->
        <self-title></self-title>
        <!-- 主体组件 -->
        <self-main></self-main>

        <self-com></self-com>
        <!-- <self-com></self-com>
        <self-com></self-com>
        <self-com></self-com> -->

    </div>
    <hr />

    <!-- 标题组件模板 -->
    <script type="text/x-template" id="self-title">
        <div>
            <h2>{{main}}</h2>
            <h3>{{second}}</h3>
        </div>
    </script>
    <!-- 标题组件的数据 -->
    <script>
        Vue.component('self-title', {
            template: '#self-title',
            data() {
                return {
                    main: '这是一个复杂的主标题',
                    second: '大盘鸡'
                };
            }
        });
    </script>

    <!-- 主体组件 -->
    <script type="text/x-template" id="self-main">
        <div>
            <div>
                任务总数：{{list.length}}，还有{{count}}未完成，{{num()}}
                <span @click="del()">【删除】</span>
            </div>
            <!-- 循环数据 -->
            <div v-for="(item, index) in list">
                <input type="checkbox" v-model="item.status"/><span v-text="item.title"></span>
            </div>
            <div>
                <input type="text" v-model="inputVal"/><button @click="add()">添加</button>
            </div>
        </div>
    </script>
    <script>
        Vue.component('self-main', {
            template: '#self-main',
            data() {
                return {
                    inputVal: '',
                    list: [
                        { title: '起床', status: false },
                        { title: '洗脸', status: false },
                        { title: '刷牙', status: false },
                    ]
                };
            },
            // 计算属性：常用于依赖数据做复杂运算，
            computed: {
                // 必须是函数，必须有返回值，使用时只用加函数名，不需要()
                count() {
                    console.log('计算属性。。');
                    var num = 0;
                    var arr = this.list;
                    for (var i = 0; i < this.list.length; i++) {
                        if (this.list[i].status === false) {
                            num++;
                        }
                    }
                    // 遍历数据中的数据，统计所有status是false的数据
                    return num;
                }
            },
            methods: {
                del() {
                    var temp = [];
                    // 获取所有status为true的元素，删除掉
                    for (var i = 0; i < this.list.length; i++) {
                        if (this.list[i].status === true) {
                            // this.list.splice(i, 1);
                            temp.push(i);
                        }
                    }
                },
                num() {
                    // 每次页面渲染的数据变化，表达式的函数都会执行
                    console.log('num执行了。。');
                    return 999;
                },
                add() {
                    console.log('add..', this.inputVal);
                    // 获取输入框的值，组装成list数据中的数据格式
                    this.list.push({
                        title: this.inputVal,
                        status: false
                    });
                    this.inputVal = ''; // 添加完清空输入框
                }
            }
        });
    </script>



    <!-- <self-com></self-com> -->
    <script type="text/x-template" id="self-com">
        <div>
            <h2>{{msg}}</h2>
            <p>{{num}}</p>
            <button @click="addNum()">add</button>
        </div>
    </script>
    <script>
        Vue.component('self-com', {
            template: '#self-com', // 类似Vue实例中的el
            data() {  // 与Vue实例中的data相同，但组件中的data必须是函数，要有返回值
                return {
                    msg: '我是self-com组件',
                    num: 0
                };
            },
            methods: {
                addNum() {
                    this.num++;
                }
            }
        });

        var vm = new Vue({
            el: '#app',
            data: {}
        });
        /*
            组件：通过Vue生成的自定义的标签
            1.创建：Vue.component(组件名, {配置对象});
            2.使用：在Vue实例的范围内，使用<组件名></组件名>
        */
    </script>
</body>

</html>